<!--

通过一个简单demo展示一个时间轴(24小时)范围选择器
通过disabledTimeList(数组 格式为'hh:mm-hh:mm')来控制禁止选用的时间段

-->

<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">时间范围选择Demo</div>
    <div class="shadow-2">
      <div class="hours-container">
        <div v-for="(item, index) in $d.hours"
          :key="index"
          class="hours-item">
          <div class="hours-item-value"
            style="border-right:1px solid #ccc">
            <div :class="compClass(2 * item)"
              @click="$d.disabledTimeRangeListIndex.includes(2*item)?'':handleClick(2 * item)"
              @mouseover="handleHover(2 * item)">
              <q-tooltip transition-show="none" transition-hide="none" anchor="center left" self="center right"
                v-if="$d.disabledTimeRangeListIndex.includes(2*item)">
                当前时间段已被预约
              </q-tooltip>
            </div>
            <div :class="compClass(2 * item + 1)"
              @click="$d.disabledTimeRangeListIndex.includes(2 * item + 1)?'':handleClick(2 * item + 1)"
              @mouseover="handleHover(2 * item + 1)">
              <q-tooltip transition-show="none" transition-hide="none" anchor="center left" self="center right"
                v-if="$d.disabledTimeRangeListIndex.includes(2 * item + 1)">
                当前时间段已被预约
              </q-tooltip>
            </div>
          </div>
          <div class="hours-item-header">
            <span v-if="index!==24">{{ $d.timeHours[index] }}</span>
          </div>
        </div>
      </div>
      <div class="tipss color999 font12 fontw ">
        <i class="el-icon-warning font14"></i>右滑选中一段时间
      </div>
      <div class="tips"><span class="color999">已选时间段：</span>
        <span class="fontw times"
          style="color:#1890ff"
          v-for="(items,index) in $d.tips"
          :key="index">{{ items }}，</span>
      </div>
      {{$d.error}}
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'timePickDemo'
}
</script>

<script lang="ts" setup>

import {onMounted, reactive} from 'vue'

const $d = reactive({
  hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
  timeHours: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],// 选项
  selectStart: false,// 开始
  startIndex: null as number | null,// 开始下标
  timeRangeList: [] as string[],// 选择的时间段
  timeRangeListIndex: [] as number[],// 选中的下标
  tempRangeIndex: [] as number[],// 预选下标
  tips: '向右选中，向左取消选择' as string | null | string[],//提示操作
  endHour: '' as string | number,//选择结束时间
  endMin: '' as string | number,//选择结束分钟
  startHour: '' as string | number,//开始时间
  startMin: '' as string | number,//开始时间
  sendTimeList: [],
  disabledTimeList: ['02:00-05:30','12:30-13:30'], //禁用的时间段
  disabledTimeRangeList: [] as string[], //禁用的时间段列表
  disabledTimeRangeListIndex: [] as number[], //禁用的下标
  error: ''
})

// 处理禁用时间段
const transformedIndex = function () {
  $d.timeRangeListIndex = []
  $d.disabledTimeRangeList = $d.disabledTimeList
  $d.disabledTimeRangeList.forEach(element=> {
    const [startTime, endTime] = (element as string).match(/\d+:\d+/g) as string[]
    if (startTime && endTime) {
      let [startHour, startMin] = startTime.split(':')
      let [endHour, endMin] = endTime.split(':')
      if (startHour && startMin && endHour && endMin) {
        let startNum, endNum
        if (startMin === '00') {
          startNum = 2 * parseInt(startHour)
        } else {
          startNum = 2 * parseInt(startHour) + 1
        }
        if (endMin === '00') {
          endNum = 2 * parseInt(endHour) - 1
        } else {
          endNum = 2 * parseInt(endHour)
        }
        while (endNum >= startNum) {
          $d.disabledTimeRangeListIndex.push(startNum)
          startNum++
        }
      }
    }
  })
  $d.tips = $d.timeRangeList && $d.timeRangeList.length > 0 ? $d.timeRangeList : ''
}

// 选中时间段
const transformedSection =function () {
  $d.timeRangeList = []
  let startTime = '', endTime = '', len = $d.hours.length
  for (let index = $d.hours[0] * 12; index < 12 * (len + 1);index++) {
    if ($d.timeRangeListIndex.indexOf(index) > -1) {
      // 如果有开始时间，直接确定结束时间
      if (startTime) {
        $d.endHour = Math.floor((index + 1) / 2)
        //判断是否重复选择选择下标开始结束时间
        if ($d.endHour === $d.startHour) {
          let endTimeAll = index % 2===0?'00':'30'
          $d.endMin = (index + 1) % 2 === 0 ? '00' : endTimeAll
          endTime = `${Number($d.endHour) < 10 ? '0' + $d.endHour : $d.endHour}:${$d.endMin}`
        } else {
          let endTimeAll = ((index+1) % 2)===0?'00':'30'
          $d.endMin = (index + 1) % 2 === 0 ? '00' : endTimeAll
          endTime = `${$d.endHour < 10 ? '0' + $d.endHour : $d.endHour}:${$d.endMin}`
        }
      } else {
        // 没有开始时间，确定当前点为开始时间
        $d.startHour = Math.floor(index / 2)
        let startTimeAll = index%2===0?'00':'30'
        $d.startMin = index % 2 === 0 ? '00' : startTimeAll
        startTime = `${$d.startHour < 10 ? '0' + $d.startHour : $d.startHour}:${$d.startMin}`
      }
      // 如果是最后一格，直接结束
      if (index === 12 * $d.hours.length + 1) {
        endTime = `${Math.floor((index + 1) / 12)}:00`
        $d.timeRangeList[0] = `${startTime ? startTime : '23:30'}-${endTime}`
        startTime = ''
        endTime = ''
      }
    } else {
      // 若这个点不在选择区间，确定一个时间段
      if (startTime && endTime) {
        $d.timeRangeList[0] = `${startTime}-${endTime}`
        startTime = ''
        endTime = ''
      } else if (startTime && !endTime) {
        // 这里可能只选半个小时
        $d.endHour = Math.floor(index / 2)
        //判断是否重复选择选择下标开始结束时间
        if ($d.endHour === $d.startHour) {
          $d.endMin = index % 2 === 0 ? '00' : '30'
          endTime = `${$d.endHour < 10 ? '0' + $d.endHour : $d.endHour}:${$d.endMin}`
          $d.timeRangeList[0] = `${startTime}-${endTime}`
          startTime = ''
          endTime = ''
        } else {
          endTime = `${$d.endHour < 10 ? '0' + $d.endHour : $d.endHour}:00`
          $d.timeRangeList[0] = `${startTime}-${endTime}`
          startTime = ''
          endTime = ''
        }
      }
    }
  }
  $d.tips = $d.timeRangeList && $d.timeRangeList.length > 0 ? $d.timeRangeList : ''
}

const handleClick = function (index:number) {
  if ($d.selectStart) {
    // 双击取反
    if (index === $d.startIndex) {
      if ($d.timeRangeListIndex.indexOf(index) > -1) {
        $d.timeRangeListIndex.splice($d.timeRangeListIndex.indexOf(index), 1)
      } else {
        $d.timeRangeListIndex.push($d.startIndex)
      }
  } else if ($d.startIndex != null && index > $d.startIndex) {
      // 选取数据--向右添加，向左取消
      while (index >= $d.startIndex) {
        $d.timeRangeListIndex.push($d.startIndex);
        $d.startIndex++;
      }
      $d.timeRangeListIndex = Array.from(new Set($d.timeRangeListIndex))
    } else {
      // 删除数据
      while ($d.startIndex != null && $d.startIndex >= index) {
        if ($d.timeRangeListIndex.indexOf(index) > -1) {
          $d.timeRangeListIndex.splice($d.timeRangeListIndex.indexOf(index), 1)
        }
        index++
      }
    }
    $d.startIndex = -1
    $d.tempRangeIndex = []
    transformedSection()
  } else {
    // 删除下面这段赋值空数组可以选多段并且可以左滑清除
    $d.timeRangeListIndex = []
    $d.startIndex = index
  }
  $d.selectStart = !$d.selectStart
}

const handleHover = function (index:number) {
  if ($d.selectStart) {
    $d.error = ''
    $d.tempRangeIndex = [];
    // 选取数据--向右添加，向左取消
    if ($d.startIndex!=null && index > $d.startIndex) {
      while (index >= $d.startIndex) {
        if ($d.disabledTimeRangeListIndex.includes(index)) {
          $d.error = '当前时间段该会议室已被申请'
        } else {
          $d.tempRangeIndex.push(index);
        }
        index--;
      }
    } else {
      // 删除数据
      while ($d.startIndex!=null && $d.startIndex >= index) {
        $d.tempRangeIndex.push(index);
        index++;
      }
    }
  }
}

// 是否选中，计算className
const compClass = function (index: number) {
  if ($d.disabledTimeRangeListIndex.includes(index)) {
    return 'hours-item-left preSelected disabled'
  }
  if (index === $d.startIndex) {
    return 'hours-item-left preSelected';
  }
  if ($d.startIndex != null && index >= $d.startIndex) {
    if ($d.tempRangeIndex.indexOf(index) > -1) {
      return 'hours-item-left preSelected';
    }
  } else {
    if ($d.tempRangeIndex.indexOf(index) > -1) {
      return 'hours-item-left unSelected';
    }
  }
  return $d.timeRangeListIndex.indexOf(index) > -1 ? 'hours-item-left selected' : 'hours-item-left';
}

onMounted(() => {
  transformedIndex()
  transformedSection()
})
</script>

<style lang="scss" scoped>
.hours-container {
  margin-left: 1.5%;
  display: flex;
  cursor: pointer;
  margin-top: 10px;
  .hours-item {
    width: 4%;
    height: 85px;
    // border: 1px solid #c2d0f3;
    border-right: none;
    text-align: center;
    &:last-child {
      .hours-item-value {
        display: none;
      }
      .hours-item-header {
        border-top: none;
        margin-top: 12px;
        margin-left: -25px;
      }
    }

    .hours-item-header {
      text-align: left;
      position: relative;
      margin-left: -20%;
      width: 100%;
      height: 30px;
      line-height: 30px;
      border-top: 1px solid #ccc;

      &:last-child {
        width: 150%;
      }
    }
    .hours-item-value {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      display: flex;
      &:first-child {
        border-left: 1px solid #ccc;
      }
      &:last-child {
        border-right: 1px solid #ccc;
      }
      .hours-item-left,
      .hours-item-right {
        width: 50%;
        height: 30px;
        margin-top: 1px;
        // border-right: 1px solid #ccc;

        box-sizing: border-box;
        &:last-child {
          border-right: none;
          border-bottom: none;
        }
      }
    }
    .selected {
      background-color: rgba(0, 87, 255, 0.4);
      border-bottom: 1px solid #ccc;
    }
    .preSelected {
      background-color: rgba(255, 148, 49, 0.4);
      border-bottom: 1px solid #ccc;
    }
    .unSelected {
      background-color: #ffffff;
      border-bottom: 1px solid #ccc;
    }
  }
}
.tips {
  // width: auto;
  border-radius: 4px;
  line-height: 30px;
  border: 1px solid #1890ff;
  background: rgba(53, 158, 255, 0.05);
  padding: 5px 20px;
  .times {
    margin-right: 0;
  }
}
.disabled {
  cursor: no-drop;
  background-color: #000 !important;
}
</style>
